<template>
  <div class="mt--20 purchase-detail">
    <el-tabs v-model="tab" type="border-card">
      <el-tab-pane label="出库基础信息">
        <div class="detail-section">
          <el-row type="flex" align="middle">
            <el-col :span="12">出库单基础信息</el-col>
            <el-col class="text-right" :span="12">
              <el-button type="danger" @click="print">打印出库单</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-form class="detail-form" label-width="120px" label-suffix=":">
            <el-row>
              <el-col :span="6">
                <el-form-item label="出库单号">
                  <span class="detail-value">{{detail.outStorageCode}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库门店">
                  <span class="detail-value">{{detail.outStoreName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库仓库">
                  <span class="detail-value">{{detail.storageName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="来源单号">
                  <span class="detail-value">{{detail.workOrderCode}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="单据日期">
                  <span class="detail-value">{{detail.receiptsTime}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库类型">
                  <span class="detail-value">{{detail.outStorageType}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库总金额">
                  <span class="detail-value">{{detail.amount}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库精品数量">
                  <span class="detail-value">{{detail.partsNum}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出库备注">
                  <span class="detail-value">{{detail.remark}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库状态">
                  <span class="detail-value">{{detail.status}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row>出库负责人</el-row>
          <el-divider></el-divider>
          <el-form class="detail-form" label-width="120px" label-suffix=":">
            <el-row>
              <el-col :span="6">
                <el-form-item label="出库负责人">
                  <span class="detail-value">{{detail.userName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系方式">
                  <span class="detail-value">{{detail.phone}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row>出库进度</el-row>
          <el-divider></el-divider>
          <steps
            v-if="detail.statusList != null && detail.statusList.length > 0"
            :setpsList="detail.statusList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="出库订单信息">
        <div class="detail-section">
          <el-row>出库精品列表</el-row>
          <el-divider></el-divider>
          <data-table
            :has-action="false"
            :value="table1.tableData"
            :total-count="table1.totalCount"
            :table-column-attributes="tableColumns1"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1">
          >
            <div class="total-count" slot="allNum">
              精品总金额:<span class="data-money">￥{{table1.amount}}</span>
            </div>
          </data-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="出库精品详情列表">
        <el-row>
          <el-col :span="4">
            出库精品详情列表
          </el-col>
          <el-col :span="20">
            <el-form class="text-right">
              <el-select v-model="searchForm.status" clearable placeholder="出库状态">
                <el-option v-for="item in dict['出库状态']" :key="item.index" :value="item.value" :label="item.text"/>
              </el-select>
              <el-select v-model="searchForm.partsUnit" clearable placeholder="二级类别">
                <el-option v-for="item in categoryList" :key="item.id" :value="item.largeName" :label="item.largeName"/>
              </el-select>
              <el-input v-model="searchForm.likeName" clearable placeholder="库存编号/精品编号" style="width: 200px"/>
              <el-button type="primary" @click="searchHandle">搜索</el-button>
            </el-form>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <data-table
          :has-action="false"
          :value="table2.tableData"
          :total-count="table2.totalCount"
          :table-column-attributes="tableColumns2"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2">
        >
          <div class="total-count" slot="allNum">
            精品总金额:<span class="data-money">￥{{table2.amount}}</span>
            <span class="ml-20">出库数:</span><span class="data-count">{{table2.putOutNum}}/{{table2.allNum}}</span>
          </div>
        </data-table>
      </el-tab-pane>
    </el-tabs>
    <!-- <print-form /> -->
  </div>
</template>

<script>
import BaseLayout from '@/views/layout/Base'
import DataTable from '@/components/DataTable'
import { Steps } from '@/components/index'
import PrintForm from './PrintForm'
import { getDict,exportFile } from '@/utils/index'
import { detailById, partsPage, partsDetailPage } from '@/api/pre-sale/boutiqueStock/putOut'
import { upCategoryToBySupplier } from '@/api/pre-sale/qualityManagement/category'
import { getPrint } from '@/api/common/index'
export default {
  components: { BaseLayout, DataTable, PrintForm, Steps },
  props: ['detailData'],
  data() {
    this.tableColumns1 = [
      { name: '精品编号', value: 'partsCode', type: 'text' },
      { name: '精品名称', value: 'partsName', type: 'text' },
      { name: '一级类别', value: 'partsType', type: 'text' },
      { name: '二级类别', value: 'partsUnit', type: 'text' },
      { name: '仓位', value: 'storageSiteName', type: 'text' },
      { name: '仓位编号', value: 'storageSiteCode', type: 'text' },
      { name: '出库数量', value: 'inStorageNum', type: 'text' },
      { name: '仓位剩余', value: 'stockNum', type: 'text' },
      { name: '采购成本', value: 'purchasePrice', type: 'text' },
      { name: '销售价', value: 'storagePrice', type: 'text' },
      { name: '总金额', value: 'amount', type: 'text' }
    ]

    this.tableColumns2 = [
      { name: '库存编号', value: 'stockCode', type: 'text' },
      { name: '精品编号', value: 'partsCode', type: 'text' },
      { name: '精品名称', value: 'partsName', type: 'text' },
      { name: '一级类别', value: 'partsType', type: 'text' },
      { name: '二级类别', value: 'partsUnit', type: 'text' },
      { name: '仓位', value: 'storageSiteName', type: 'text' },
      { name: '仓位编号', value: 'storageSiteCode', type: 'text' },
      { name: '采购成本', value: 'purchasePrice', type: 'text' },
      { name: '销售价', value: 'storagePrice', type: 'text' },
      { name: '状态', value: 'status', type: 'text' },
      { name: '扫码出库人', value: 'userName', type: 'text' },
      { name: '扫码出库时间', value: 'outTime', type: 'text' }
    ]

    return {
      tab: 0,
      detail: {},
      table1: {
        pageSize: 10,
        currentPage: 1,
        tableData: [],
        totalCount: 0,
        amount: 0
      },
      table2: {
        pageSize: 10,
        currentPage: 1,
        tableData: [],
        totalCount: 0,
        amount: 0,
        putOutNum: 0,
        allNum: 0
      },
      searchForm: {
        status: '',
        partsUnit: '',
        likeName: ''
      },
      categoryList: [],
      printObj: {
        id: 'purchaseReturnPrint',
        popTitle: '',
        extraCss: '',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      }
    }
  },
  watch: {
    tab(newVlaue) {
      if (newVlaue >= 1) {
        const table = this[`table${newVlaue}`]
        if (table.tableData.length == 0) {
          this[`handleCurrentChange${newVlaue}`](1)
        }
      }
    }
  },
  methods: {
   async print(){
     exportFile(`${process.env.BASE_API}/sq/brandOutStorage/print/${this.detail.id}`,`${this.detail.outStorageCode}-出库单.pdf`);
    },
    requestDetail(id) {
      detailById(id).then(res => {
        this.detail = res.data || {}
        this.requestCategoryList()
      })
    },
    handleSizeChange1(pageSize) {
      this.table1.pageSize = pageSize
      this.requestPartsPage()
    },
    handleCurrentChange1(currentPage) {
      this.table1.currentPage = currentPage
      this.requestPartsPage()
    },
    // 请求精品分页
    requestPartsPage() {
      partsPage({ outStorageId: this.detailData.id }, this.table1.pageSize, this.table1.currentPage).then(res => {
        const { content, totalRecords } = res.data
        let amount = 0
        this.table1.totalCount = totalRecords || 0
        this.table1.tableData = content || []
        this.table1.tableData.forEach(item => {
          item.all = item.alreadyNum + item.num
          amount += item.amount
        })
        this.table1.amount = amount
      })
    },
    searchHandle() {
      this.handleCurrentChange2(1)
    },
    handleSizeChange2(pageSize) {
      this.table2.pageSize = pageSize
      this.requestPartsDetailPage()
    },
    handleCurrentChange2(currentPage) {
      this.table2.currentPage = currentPage
      this.requestPartsDetailPage()
    },
    // 请求精品详情分页
    requestPartsDetailPage() {
      partsDetailPage({ outStorageId: this.detailData.id, ...this.searchForm }, this.table2.pageSize, this.table2.currentPage).then(res => {
        const { content, totalRecords } = res.data
        let amount = 0
        let putOutNum = 0
        this.table2.totalCount = totalRecords || 0
        this.table2.tableData = content || []
        this.table2.tableData.forEach(item => {
          amount += item.storagePrice || 0
          console.log(item)
          if (item.status == '已扫码出库') {
            putOutNum += 1
          }
        })
        this.table2.amount = amount
        this.table2.putOutNum = putOutNum
        this.table2.allNum = this.table2.tableData.length
      })
    },
    // 请求分类树形结构，解析二级分类
    requestCategoryList(supplierId = '') {
      upCategoryToBySupplier(supplierId).then(res => {
        const listData = res.data || []
        listData.unshift({ id: '', largeName: '全部' })
        this.categoryList = listData
      })
    }
  },
  created() {
    this.dict = getDict(['出库状态'])
  },
  mounted() {
    if (this.detailData) {
      this.requestDetail(this.detailData.id)
    }
    // this.requestCategoryList()
  }
}
</script>

<style></style>
